<template>
<div class="main-classification app-container primary-blue">
  <product-module-title :title="$t('HomeModuleTitle1')">
    <template v-slot:more>
      <div class="all" @click="jumpToCategory"> {{ $t('CommonAllText') }} <i class="el-icon-arrow-right"></i></div>
    </template>
  </product-module-title>
  <div class="swiper-container">
    <div class="swiper-wrapper" :style="{'transform': `translateX(${translateX}px)`}">
      <div class="swiper-slide" v-for="(item, index) in recommendCate" :key="index" @click="handleItemClick(item.id)">
        <div class="main-classification-item flex-center">
          <div class="img-content">
            <img :src="item.icon" alt="">
          </div>
          <span :title="item.name">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script setup>
import { ref, onUnmounted } from 'vue'
import { useRouter } from "vue-router";
import ProductModuleTitle from "@/components/common/ProductModuleTitle.vue";
const props = defineProps({
  recommendCate: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const router = useRouter()
const translateX = ref(0)
const moveNumber = ref(0)
const timer = setInterval(() => {
  if(moveNumber.value === 20-11) {
    moveNumber.value = 0
    translateX.value = 0
  }else{
    moveNumber.value ++
    translateX.value = -109.09 * moveNumber.value
  }
}, 5000)
const jumpToCategory = () => {
  router.push('/category')
}
const handleItemClick = (id) => {
  router.push('/product?cid='+id)
}
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style scoped>
.swiper-container{
  overflow: hidden;
}
.swiper-wrapper{
  display: flex;
  align-items: center;
  transition: all 0.5s ease-in-out;
}
.swiper-slide{
  width: 109.09px;
  flex-shrink: 0;
}
.main-classification {
  margin-top: 26px;
  margin-bottom: 16px
}

.main-classification-title h1 {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-grey);
  margin: 24px 0
}

.all,.all span {
  color: var(--color-main);
  font-size: 12px;
}

.all {
  cursor: pointer;
  font-weight: 400;
}

.main-classification-item {
  flex-direction: column;
}

.main-classification-item:hover .img-content {
  //border-color: var(--color-main);
  transition: ease-in-out;
  transform: scale(.95)
}

.main-classification-item:hover span {
  //color: var(--color-main)
}

.main-classification-item .img-content {
  border: 1px solid var(--color-border);
  margin-bottom: 7px;
  border-radius: 3px;
  width: 92px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center
}

.main-classification-item .img-content>img {
  width: 52px!important;
  height: 52px!important;
  -o-object-fit: contain;
  object-fit: contain
}

.main-classification-item span {
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.main-classification .swiper-container {
  cursor: pointer;
  font-size: 12px
}
</style>